<template>
  <div class="header" :class='[headerScroll]'>
	  <div class="header-goBack" @click="goBack">
		  <span class="iconfont">&#xe729;</span>
	  </div>
	  <div class="header-search"><span class="iconfont">&#xe6a2; 搜一下，带你玩转周边</span></div>
	  <RouterLink to='/location'>
		  <div class="header-city">
			  <span class="iconfont">{{this.$store.state.city}}&#xe616;</span>
		  </div>
	  </RouterLink>
  </div>
</template>

<script>
export default {
  name: 'travel_homeHeader',
  props:['city'],
  data(){
	  return{
		  headerScroll:''
	  }
  },
  methods:{
	  srollChange(){
		  let scrollHeight=document.documentElement.scrollTop
		  if(scrollHeight>0){
			 this.headerScroll='headerScroll'
		  }else{
			 this.headerScroll=''
		  }
	  },
	  goBack(){
		  this.$router.push('/')
	  }
  },
  mounted(){
	  window.addEventListener('scroll',this.srollChange)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.header
	text-align: center
	line-height: 44px
	display:flex
	margin:0 auto
	width:100%
	position:absolute
	top:0
	left:0
	z-index:200
	background-color:transparent
	.header-city
		margin-right:0.1rem
		color:#23beae
	.header-search
		flex:1
		height:30px
		line-height:30px
		border-radius:25px
		box-shadow:0 0 0.5px 0.5px #ccc
		margin:6px 12px
		background:#fff
		span
			color:#93989f
			font-size:15px
	.header-goBack
		float:right
		width:10%
		color:#23beae
.headerScroll
	position:fixed
	top:0
	left:0
	z-index:200
	background:#fff

	
</style>
